<template>
  <div class="content">
    <!-- <h1>{{ msg }}</h1> -->
    <!-- <p>当前在线人数：{{ userNmber }}</p> -->
    <!-- <p>
      用户名：
      <input
        type="请输入你的名字"
        v-model="userStorage"
        @keyup.enter="btn_sbmit"
      />
    </p> -->

      <div  class="demo" >
          <div class='left'  >
        <div  v-for="(item, index) in mySpeak" :key="index" >
          <p >
              本大爷:
            {{ item.msg }}
          </p>

        </div>
        </div>
        <div  class='right'   >
              <div  v-for="(item, index) in speak" :key="index" >
          <p v-if="ID!==item.name">
              其他人:
        {{ item.msg }}
          </p>
        </div>
        </div>
      </div>
      <div class="button">
        <van-cell-group>
            <van-field v-model="inValue" placeholder="请输入聊天内容"  />
          </van-cell-group>
          <van-button type="primary" @click="btn_sbmit" >发送</van-button>
      </div>

  </div>
</template>
<script>
// import { log } from 'util';s
import { Field, Cell, CellGroup, Button } from 'vant';
window.dataList = [];
export default {
    name: 'HelloWorld',
    props: {
    msg: String
        },
        components: {
        [Field.name]: Field,
        [Cell.name]: Cell,
        [CellGroup.name]: CellGroup,
        [Button.name]: Button,
        },
  // localStorage.getItem('userId'),
    data() {
    return {
      speak: [], // 聊天记录
      mySpeak: [],
      inValue: '', // 当前输入信息
        userIp: '未知用户',
      newUser: false, // 是否有新人加入
      userNmber: 0 // 在线人数
    };
},
    created() {},
    watch: {
    speak: function(val) {
        this.speak = val;
    }
},
    mounted() {
    this.$socket.emit('connect', 1);
},
    computed: {
        ID() {
            return this.$store.state.user.userID;
        },
        //  speak () {
        //  return localStorage.getItem('myspeak', this.myspeak)
        //  }
    },
        sockets: {
    // 连接后台
    connect(data) {
        if (data) {
        console.log('连接成功', data);
        this.$socket.emit('change', { user: '', msg: '' });
        }
    },
    users(data) {
        this.userNmber = data;
    },
    reconnect(data) {
        // console.log('重新连接', data)
    },
    disconnecting(data) {
        console.log('socket已断开连接');
        this.$socket.emit('users');
    },
    notice(data) {
        this.speak = data
        // console.log(this.speak);
    },
    online(data) {
        this.userNmber = data;
        console.log('在线人数：' + data);
    }
},
    methods: {
    // 提交向后端发送数据
    btn_sbmit() {
        let user = { name: this.ID, msg: this.inValue };
        // console.log(this.speak);
        this.mySpeak.push(user);
        this.$socket.emit('emitChat', user);
        // console.log(this.speak);
    },
    // 生成id
    },
    beforeDestroy() {
          localStorage.setItem('myspeak', this.myspeak);
          localStorage.setItem('speak', this.speak);
    }

};
</script>
<style lang="scss">
.content{
.demo{
  width: 100%;
  height: 700px;
  background-color:rgb(173, 173, 161) ;
  display: flex;
  .left{
      width: 50%;
      height: 100%;
      background-color: #fff;
  }

}
}
.button{
  display: flex;
  justify-content: space-between;
}
</style>
